<template>
	<view class="main">
		<view>
		<p class="title">我发送的领养申请</p>
		<view class="list">我的领养申请列表</view>
		</view>
		<view>
		<p class="title">我送出的宠物</p>
		<view class="list">
		<view class="pet-desc" v-for="item in listData" :key='item.aname'>
			<image :src="item.aphoto" class="pet-img"></image>
			<p class="desc">{{item.adesc}}</p>
		</view>	
		</view>
		</view>
		<view class="bottom">
			<navigator class="btn" @click="gotoIndex()">主页</navigator>
			<navigator class="btn"  @click="gotoMy()">我的</navigator>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import ajax from "../../util/request"
	import {reactive} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	
	const listData = reactive([])
	onLoad(()=>{
		ajax("/petsystem/user/apet/getMyApetList",{cid:1}).then((res)=>{
			console.log('listData=',res)
			listData.push(...res.data.data)
			console.log('listData=',listData)
		})
	})
	function gotoIndex(){
		uni.switchTab({
			url:"/pages/index/index"
		})
	}
	function gotoMy(){
		uni.switchTab({
			url:"/pages/my/my"
		})
	}
</script>

<style lang="scss" scoped>
	.main{
		background-color: rgb(255, 228, 245);
		width: 100vw;
		height: 100vh;
	}
	.title{
	 padding: 5rpx 0;
	 text-align: center;
	 border: 1px solid #fff;
	}
	.list{
		height: 500rpx;
		border: 1px solid #eee;
	}
	.pet-desc{
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 94%;
		height: 150rpx;
		background-color: #fff;
		padding: 20rpx 10rpx;
		border-radius: 10rpx;
		margin: 13rpx auto;
	}
	.pet-img{
		width: 120rpx;
		height: 120rpx;
	}
	.desc{
		width: 600rpx;
		margin-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all; /*允许在单词内换行,防止有字母时候出问题*/
		display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
		-webkit-line-clamp:3; /*多行在这里修改数字即可*/
		-webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
	}
	.bottom{
		display: flex;
		justify-content: space-around; 
		padding-top: 20rpx;
	}
	.btn{
		padding: 5rpx 20rpx;
		border: 1px solid #000;
		border-radius: 5rpx;
		background-color: #fff;
	}
</style>